<template>
  <view class="detail-container">
    <!-- 沉浸式头部 -->
    <view class="header" :style="{ height: headerHeight + 'px' }">
      <image 
        class="header-image" 
        :src="currentImage" 
        mode="aspectFill"
        :style="{ height: headerHeight + 'px' }"
      />
      <view class="header-overlay"></view>
      
      <!-- 返回按钮 -->
      <view class="nav-back" @click="navBack">
        <uni-icons type="arrowleft" size="24" color="#fff"><</uni-icons>
      </view>
      
      <!-- 图片指示器 -->
      <view class="image-indicator">
        <text>{{ currentImageIndex + 1 }}/{{ attraction.images.length }}</text>
      </view>
    </view>

    <!-- 主内容区 -->
    <scroll-view 
      scroll-y 
      class="content-scroll"
      :style="{ marginTop: -40 + 'px' }"
      :scroll-top="scrollTop"
    >
      <!-- 核心信息卡片 -->
      <view class="info-card">
        <view class="title-row">
          <text class="attraction-name">{{ attraction.name }}</text>
          <view class="action-buttons">
            <view class="action-btn" @click="toggleFavorite">
              <uni-icons 
                :type="isFavorite ? 'heart-filled' : 'heart'" 
                size="22" 
                :color="isFavorite ? '#ff4d4f' : '#666'"
              ></uni-icons>
            </view>
            <view class="action-btn" @click="shareAttraction">
              <uni-icons type="share" size="22" color="#666"></uni-icons>
            </view>
          </view>
        </view>
        
        <view class="meta-row">
          <uni-rate 
            :value="attraction.rating" 
            size="14" 
            readonly 
            color="#ffb400"
          />
          <text class="rating-text">{{ attraction.rating.toFixed(1) }}</text>
          <text class="review-count">{{ attraction.reviewCount }}条评价</text>
        </view>
        
        <view class="location-row">
          <uni-icons type="location-filled" size="16" color="#1a8cff"></uni-icons>
          <text class="location-text">{{ attraction.location }}</text>
          <text class="distance">{{ attraction.distance }}km</text>
        </view>
        
        <view class="tag-container">
          <text 
            v-for="tag in attraction.tags" 
            :key="tag"
            class="tag"
            :style="{ 
              backgroundColor: getTagColor(tag),
              color: getTagTextColor(tag)
            }"
          >
            {{ tag }}
          </text>
        </view>
        
        <view class="price-row">
          <text class="current-price">￥{{ attraction.price }}</text>
          <text v-if="attraction.originalPrice" class="original-price">￥{{ attraction.originalPrice }}</text>
          <text v-if="attraction.discount" class="discount-tag">{{ attraction.discount }}折</text>
        </view>
      </view>
      
      <!-- 图片缩略图 -->
      <scroll-view scroll-x class="thumbnail-scroll">
        <view 
          v-for="(img, index) in attraction.images" 
          :key="index"
          class="thumbnail-item"
          :class="{ active: currentImageIndex === index }"
          @click="changeImage(index)"
        >
          <image :src="img" mode="aspectFill"></image>
        </view>
      </scroll-view>
      
      <!-- 标签导航 -->
      <view class="tab-bar">
        <view 
          v-for="tab in tabs" 
          :key="tab.name"
          class="tab-item"
          :class="{ active: currentTab === tab.name }"
          @click="switchTab(tab.name)"
        >
          <text>{{ tab.text }}</text>
          <view v-if="currentTab === tab.name" class="indicator"></view>
        </view>
      </view>
      
      <!-- 动态内容区 -->
      <view class="tab-content">
        <!-- 介绍 -->
        <view v-show="currentTab === 'intro'" class="intro-section">
          <text class="section-title">景点介绍</text>
          <text class="intro-text">{{ attraction.introduction }}</text>
          
          <text class="section-title" style="margin-top: 20px;">开放时间</text>
          <view class="time-table">
            <view 
              v-for="time in attraction.openTime" 
              :key="time.day"
              class="time-row"
            >
              <text class="day">{{ time.day }}</text>
              <text class="time">{{ time.time }}</text>
            </view>
          </view>
          
          <text class="section-title" style="margin-top: 20px;">小贴士</text>
          <view class="tips-list">
            <view 
              v-for="(tip, index) in attraction.tips" 
              :key="index"
              class="tip-item"
            >
              <uni-icons type="info" size="16" color="#1a8cff"></uni-icons>
              <text class="tip-text">{{ tip }}</text>
            </view>
          </view>
        </view>
        
        <!-- 评论 -->
        <view v-show="currentTab === 'review'" class="review-section">
          <view class="review-summary">
            <text class="rating-large">{{ attraction.rating.toFixed(1) }}</text>
            <uni-rate 
              :value="attraction.rating" 
              size="18" 
              readonly 
              color="#ffb400"
            />
            <text class="review-count">{{ attraction.reviewCount }}条评价</text>
          </view>
          
          <view 
            v-for="review in attraction.reviews" 
            :key="review.id"
            class="review-item"
          >
            <image class="avatar" :src="review.avatar"></image>
            <view class="review-content">
              <text class="user-name">{{ review.user }}</text>
              <uni-rate 
                :value="review.rating" 
                size="12" 
                readonly 
                color="#ffb400"
              />
              <text class="review-text">{{ review.content }}</text>
              <text class="review-time">{{ review.time }}</text>
            </view>
          </view>
        </view>
        
        <!-- 攻略 -->
        <view v-show="currentTab === 'guide'" class="guide-section">
          <view 
            v-for="guide in attraction.guides" 
            :key="guide.title"
            class="guide-item"
          >
            <text class="guide-title">{{ guide.title }}</text>
            <image 
              v-for="(img, index) in guide.images" 
              :key="index"
              class="guide-image"
              :src="img"
              mode="widthFix"
              @click="previewImage(guide.images, index)"
            ></image>
            <text class="guide-content">{{ guide.content }}</text>
          </view>
        </view>
      </view>
      
      <!-- 地图嵌入 -->
      <view class="map-container" v-show="currentTab === 'intro'">
        <map 
          :latitude="attraction.latitude"
          :longitude="attraction.longitude"
          :markers="markers"
          style="width: 100%; height: 200px;"
        ></map>
        <view class="map-actions">
          <view class="map-btn" @click="openMapApp">
            <uni-icons type="paperplane" size="16" color="#1a8cff"></uni-icons>
            <text>导航前往</text>
          </view>
          <view class="map-btn" @click="copyAddress">
            <uni-icons type="compose" size="16" color="#1a8cff"></uni-icons>
            <text>复制地址</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view class="price-display">
        <text class="price-label">门票</text>
        <text class="price-value">￥{{ attraction.price }}</text>
        <text v-if="attraction.originalPrice" class="original-price">￥{{ attraction.originalPrice }}</text>
      </view>
      <view class="action-buttons">
        <button class="btn secondary" @click="showTicketPopup">门票预订</button>
        <button class="btn primary" @click="showPackagePopup">套餐购买</button>
      </view>
    </view>
    
    <!-- 门票选择弹窗 -->
    <uni-popup ref="ticketPopup" type="bottom">
      <view class="popup-content">
        <text class="popup-title">选择门票类型</text>
        <radio-group @change="handleTicketChange">
          <view 
            v-for="ticket in attraction.tickets" 
            :key="ticket.type"
            class="ticket-item"
          >
            <view class="ticket-info">
              <text class="ticket-name">{{ ticket.type }}</text>
              <text class="ticket-desc">{{ ticket.desc }}</text>
            </view>
            <view class="ticket-price">
              <text>￥{{ ticket.price }}</text>
              <radio :value="ticket.type" :checked="ticket.type === selectedTicket" color="#1a8cff"></radio>
            </view>
          </view>
        </radio-group>
        <button class="confirm-btn" @click="confirmTicket">立即预订</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 设计色调配置
const primaryColor = '#1a8cff'
const activeColor = '#1a8cff'
const warningColor = '#ff4d4f'

// 响应式数据
const headerHeight = ref(300)
const currentImageIndex = ref(0)
const scrollTop = ref(0)
const isFavorite = ref(false)
const currentTab = ref('intro')
const selectedTicket = ref('')
const ticketPopup = ref(null)

// 景点数据
const attraction = ref({
  id: 1,
  name: '故宫博物院',
  images: [
    '/static/home/gugong.webp',
    '/static/gugong-2.jpg',
    '/static/gugong-3.jpg'
  ],
  rating: 4.7,
  reviewCount: 12456,
  location: '北京市东城区景山前街4号',
  distance: 3.5,
  tags: ['世界遗产', '5A景区', '历史古迹'],
  price: 60,
  originalPrice: 80,
  discount: 7.5,
  introduction: '故宫是中国明清两代的皇家宫殿，旧称紫禁城...（详细简介）',
  openTime: [
    { day: '周二至周日', time: '08:30-17:00' },
    { day: '周一', time: '闭馆' }
  ],
  tips: [
    '需提前1-7天预约购票',
    '携带身份证原件入园',
    '午门为唯一入口'
  ],
  reviews: [
    {
      id: 1,
      user: '旅行达人',
      avatar: '/static/avatar1.jpg',
      rating: 5,
      content: '非常震撼的历史建筑群，建议租讲解器',
      time: '2023-05-15'
    }
    // 更多评论...
  ],
  guides: [
    {
      title: '最佳拍照点',
      images: ['/static/guide1.jpg'],
      content: '太和殿广场东南角可以拍到全景...'
    }
    // 更多攻略...
  ],
  latitude: 39.916344,
  longitude: 116.397154,
  tickets: [
    { type: '成人票', desc: '18-59周岁', price: 60 },
    { type: '学生票', desc: '凭有效证件', price: 30 }
  ]
})

const tabs = ref([
  { name: 'intro', text: '介绍' },
  { name: 'review', text: '评价' },
  { name: 'guide', text: '攻略' }
])

const markers = computed(() => [{
  id: 1,
  latitude: attraction.value.latitude,
  longitude: attraction.value.longitude,
  title: attraction.value.name,
  iconPath: '/static/marker.png'
}])

const currentImage = computed(() => attraction.value.images[currentImageIndex.value])

// 生命周期
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  headerHeight.value = systemInfo.windowWidth * 0.8
})

onLoad((options) => {
  if (options.id) {
    // 实际项目中这里应该根据id获取景点详情
    fetchAttractionDetail(options.id)
  }
})

// 方法定义
const fetchAttractionDetail = (id) => {
  // 模拟API请求
  console.log('Fetching attraction detail:', id)
}

const navBack = () => {
  uni.navigateBack()
}

const changeImage = (index) => {
  currentImageIndex.value = index
}

const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value
  uni.showToast({
    title: isFavorite.value ? '已收藏' : '已取消',
    icon: 'none'
  })
}

const shareAttraction = () => {
  uni.share({
    title: attraction.value.name,
    path: `/pages/attraction/detail?id=${attraction.value.id}`
  })
}

const switchTab = (tab) => {
  currentTab.value = tab
  scrollTop.value = Math.random() // 强制触发滚动刷新
}

const getTagColor = (tag) => {
  const colorMap = {
    '世界遗产': '#e6f7ff',
    '5A景区': '#f6ffed',
    '历史古迹': '#fff2e8'
  }
  return colorMap[tag] || '#f8f8f8'
}

const getTagTextColor = (tag) => {
  const colorMap = {
    '世界遗产': '#1890ff',
    '5A景区': '#52c41a',
    '历史古迹': '#fa8c16'
  }
  return colorMap[tag] || '#666'
}

const showTicketPopup = () => {
  ticketPopup.value.open()
}

const showPackagePopup = () => {
  uni.showToast({
    title: '套餐功能开发中',
    icon: 'none'
  })
}

const handleTicketChange = (e) => {
  selectedTicket.value = e.detail.value
}

const confirmTicket = () => {
  ticketPopup.value.close()
  uni.navigateTo({
    url: `/pages/ticket/order?attractionId=${attraction.value.id}&type=${selectedTicket.value}`
  })
}

const previewImage = (images, index) => {
  uni.previewImage({
    current: index,
    urls: images
  })
}

const openMapApp = () => {
  uni.openLocation({
    latitude: attraction.value.latitude,
    longitude: attraction.value.longitude,
    name: attraction.value.name
  })
}

const copyAddress = () => {
  uni.setClipboardData({
    data: attraction.value.location,
    success: () => {
      uni.showToast({ title: '地址已复制' })
    }
  })
}
</script>

<style lang="scss">
.detail-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: #f8f8f8;
  
  .header {
    position: relative;
    width: 100%;
    
    .header-image {
      width: 100%;
    }
    
    .header-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    }
    
    .nav-back {
      position: absolute;
      top: var(--status-bar-height);
      left: 15px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background-color: rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .image-indicator {
      position: absolute;
      bottom: 20px;
      right: 15px;
      background-color: rgba(0,0,0,0.5);
      color: #fff;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 10px;
    }
  }
  
  .content-scroll {
    position: relative;
    z-index: 2;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #f8f8f8;
    padding-bottom: 60px;
  }
  
  .info-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    margin: 0 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    
    .title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .attraction-name {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        flex: 1;
      }
      
      .action-buttons {
        display: flex;
        
        .action-btn {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    
    .meta-row {
      display: flex;
      align-items: center;
      margin: 8px 0;
      
      .rating-text {
        font-size: 14px;
        color: #ffb400;
        margin: 0 5px 0 3px;
      }
      
      .review-count {
        font-size: 12px;
        color: #999;
      }
    }
    
    .location-row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
      .location-text {
        font-size: 14px;
        color: #666;
        margin: 0 10px;
        flex: 1;
      }
      
      .distance {
        font-size: 12px;
        color: #999;
      }
    }
    
    .tag-container {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      
      .tag {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-right: 6px;
        margin-bottom: 6px;
      }
    }
    
    .price-row {
      display: flex;
      align-items: center;
      
      .current-price {
        font-size: 20px;
        font-weight: bold;
        color: #ff4d4f;
      }
      
      .original-price {
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
        margin: 0 8px;
      }
      
      .discount-tag {
        font-size: 12px;
        color: #fff;
        background-color: #ff4d4f;
        border-radius: 4px;
        padding: 1px 6px;
      }
    }
  }
  
  .thumbnail-scroll {
    white-space: nowrap;
    padding: 10px 15px;
    margin-top: 10px;
    
    .thumbnail-item {
      display: inline-block;
      width: 80px;
      height: 60px;
      margin-right: 10px;
      border-radius: 6px;
      overflow: hidden;
      border: 2px solid transparent;
      
      &.active {
        border-color: #1a8cff;
      }
      
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .tab-bar {
    display: flex;
    background-color: #fff;
    padding: 0 15px;
    border-bottom: 1px solid #f0f0f0;
    
    .tab-item {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      font-size: 14px;
      color: #666;
      position: relative;
      
      &.active {
        color: #1a8cff;
        
        .indicator {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 20px;
          height: 3px;
          background-color: #1a8cff;
          border-radius: 3px;
        }
      }
    }
  }
  
  .tab-content {
    padding: 15px;
    background-color: #fff;
    
    .section-title {
      display: block;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
    
    .intro-text {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }
    
    .time-table {
      .time-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #f5f5f5;
        
        .day {
          font-size: 14px;
          color: #666;
        }
        
        .time {
          font-size: 14px;
          color: #333;
        }
      }
    }
    
    .tips-list {
      .tip-item {
        display: flex;
        padding: 8px 0;
        
        .tip-text {
          font-size: 14px;
          color: #666;
          margin-left: 6px;
          flex: 1;
        }
      }
    }
    
    .review-summary {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #f5f5f5;
      
      .rating-large {
        font-size: 36px;
        font-weight: bold;
        color: #333;
      }
      
      .review-count {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
      }
    }
    
    .review-item {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #f5f5f5;
      
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-right: 10px;
      }
      
      .review-content {
        flex: 1;
        
        .user-name {
          font-size: 14px;
          font-weight: bold;
          color: #333;
        }
        
        .review-text {
          display: block;
          font-size: 14px;
          color: #666;
          margin: 5px 0;
          line-height: 1.4;
        }
        
        .review-time {
          font-size: 12px;
          color: #999;
        }
      }
    }
    
    .guide-item {
      padding: 15px 0;
      border-bottom: 1px solid #f5f5f5;
      
      .guide-title {
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }
      
      .guide-image {
        width: 100%;
        border-radius: 8px;
        margin: 5px 0;
      }
      
      .guide-content {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
      }
    }
  }
  
  .map-container {
    margin-top: 10px;
    background-color: #fff;
    padding: 15px;
    
    .map-actions {
      display: flex;
      margin-top: 10px;
      
      .map-btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 0;
        
        text {
          font-size: 14px;
          color: #1a8cff;
          margin-left: 5px;
        }
      }
    }
  }
  
  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    
    .price-display {
      flex: 1;
      
      .price-label {
        font-size: 12px;
        color: #999;
        display: block;
      }
      
      .price-value {
        font-size: 18px;
        font-weight: bold;
        color: #ff4d4f;
      }
      
      .original-price {
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
        margin-left: 5px;
      }
    }
    
    .action-buttons {
      display: flex;
      
      .btn {
        margin-left: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-radius: 20px;
        padding: 0 20px;
        
        &.secondary {
          background-color: #fff;
          color: #1a8cff;
          border: 1px solid #1a8cff;
        }
        
        &.primary {
          background-color: #1a8cff;
          color: #fff;
        }
      }
    }
  }
  
  .popup-content {
    background-color: #fff;
    padding: 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    
    .popup-title {
      display: block;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .ticket-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
      
      .ticket-info {
        flex: 1;
        
        .ticket-name {
          display: block;
          font-size: 16px;
          color: #333;
        }
        
        .ticket-desc {
          display: block;
          font-size: 12px;
          color: #999;
          margin-top: 3px;
        }
      }
      
      .ticket-price {
        display: flex;
        align-items: center;
        
        text {
          font-size: 16px;
          font-weight: bold;
          color: #ff4d4f;
          margin-right: 15px;
        }
      }
    }
    
    .confirm-btn {
      margin-top: 20px;
      background-color: #1a8cff;
      color: #fff;
      border-radius: 20px;
      height: 44px;
      line-height: 44px;
      font-size: 16px;
    }
  }
}
</style>